<template>
  <div class="classification">
    <!-- 垃圾分类 -->
    <div class="bgc1">
      <div class="waste" style="text-align:center;line-height:230rpx;">
        <input type="text" confirm-type="search" placeholder="请输入垃圾名称" placeholder-style="color: #cccaca;" v-model="wasteName" @confirm="searchWaste">
        <div class="search" @click="searchWaste">
          <img src="../../../static/images/wasteyard/search.png" alt="">
        </div>
      </div>
      <!-- <div class="wastelist">
        <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
          <view style="height:500rpx;background:red;"></view>
          <view style="height:500rpx;background:green;"></view>
          <view style="height:500rpx;background:yellow;"></view>
        </scroll-view>
      </div> -->
    </div>
    <!-- 可回收垃圾 -->
    <div class="bgc2">
      <div class="waste1 ripple" @click="navToWasteListPage(1)">
        <div class="text">
          <div>可回收垃圾</div>
          <div>RECYCLABLE WASTE</div>
          <img src="../../../static/images/wasteyard/icon1.png" alt="">
        </div>
      </div>
    </div>
    <!-- 干垃圾 -->
    <div class="bgc3">
      <div class="waste2 ripple" @click="navToWasteListPage(2)">
        <div class="text">
          <div>干垃圾</div>
          <div>RESIDUAL WASTE</div>
          <img src="../../../static/images/wasteyard/icon2.png" alt="">
        </div>
      </div>
    </div>
    <!-- 湿垃圾 -->
    <div class="bgc4">
      <div class="waste3 ripple" @click="navToWasteListPage(3)">
        <div class="text">
          <div>湿垃圾</div>
          <div>HOUSEHOLD FOOD WASTE</div>
          <img src="../../../static/images/wasteyard/icon3.png" alt="">
        </div>
      </div>
    </div>
    <!-- 有害垃圾 -->
    <div class="bgc5">
      <div class="waste4 ripple" @click="navToWasteListPage(4)">
        <div class="text">
          <div>有害垃圾</div>
          <div>HAZARDOUS WASTE</div>
          <img src="../../../static/images/wasteyard/icon4.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { RECYCLABLE_WASTE, HAZARDOUS_WASTE, HOUSEHOLD_FOOD_WASTE, RESIDUAL_WASTE } from '../../utils/data.js'

export default {
  data () {
    return {
      wasteName: ''
    }
  },

  methods: {

    /**
     * 查找垃圾
     */
    searchWaste () {
      console.log(this.wasteName)
      if (this.checkWasteType('RECYCLABLE_WASTE', this.wasteName, RECYCLABLE_WASTE)) {
        // 可回收垃圾
        this.navToWastePosterPage(1)
      } else if (this.checkWasteType('RESIDUAL_WASTE', this.wasteName, RESIDUAL_WASTE)) {
        // 干垃圾
        this.navToWastePosterPage(2)
      } else if (this.checkWasteType('HOUSEHOLD_FOOD_WASTE', this.wasteName, HOUSEHOLD_FOOD_WASTE)) {
        // 湿垃圾
        this.navToWastePosterPage(3)
      } else if (this.checkWasteType('HAZARDOUS_WASTE', this.wasteName, HAZARDOUS_WASTE)) {
        // 有害垃圾
        this.navToWastePosterPage(4)
      } else {
        console.log('没找到')
        wx.showModal({
          title: '提示',
          content: '您搜索的内容暂时无法分别，请重新查询~',
          showCancel: false,
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
    },

    /**
     * 检查垃圾种类
     * @return true:查找成功；false:没找到
     */
    checkWasteType (wasteType, keyword, wasteList) {
      var param = {
        'categoryCode': wasteType,
        'name': keyword
      }
      return JSON.stringify(wasteList.result).indexOf(JSON.stringify(param)) !== -1
    },

    /**
     * 跳转垃圾海报页面
     */
    navToWastePosterPage (flag) {
      wx.navigateTo({
        url: '/pages/poster/main?id=' + flag + '&wasteName=' + this.wasteName
      })
    },

    /**
     * 跳转到垃圾列表页面
     */
    navToWasteListPage (flag) {
      setTimeout(function () {
        wx.navigateTo({
          url: '/pages/wastelist/main?id=' + flag
        })
      }, 100)
    }
  }
}
</script>

<style lang='less' scoped>
@bgcardColors: #eacf5a, #4dbcf8, #9447d1, #03062c, white;
@bgcardColors1: #eacf5a, #4dbcf8, #9447d1, #03062c;

.classification {
  :first-child(div) {
    height: 2.3rem;
  }
  .bgc-loop(1);
  .waste {
    height: 100%;
    background: #fff;
    border-bottom-left-radius: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      border: 2rpx solid #cccaca;
      border-radius: 100rpx;
      height: 80rpx;
      line-height: 80rpx;
      width: 459rpx;
      text-align: left;
      padding: 0 100rpx 0 40rpx;
      color: #acacac;
    }
    .search {
      height: 45rpx;
      width: 45rpx;
      margin-left: -60rpx;
      position: relative;
      right: 40rpx;
      border-left: 1px solid #cccaca;
      padding-left: 15rpx;
      img {
        height: 100%;
        width: 100%;
        display: inline;
      }
    }
  }
  .waste-loop(1);
  .wastelist {
    position: relative;
    top: -60rpx;
    z-index: 100;
    margin: 0 85rpx;
    border-radius: 43rpx;
    overflow: hidden;
  }
}

// 背景颜色循环
.bgc-loop(@i) when (@i < length(@bgcardColors) + 1) {
  .bgc-loop(@i+1);
  .bgc@{i} {
    height: 2.3rem;
    background: extract(@bgcardColors, @i);
  }
}
.waste-loop(@i) when (@i < length(@bgcardColors1) + 1) {
  .waste-loop(@i+1);
  .waste@{i} {
    height: 100%;
    background: extract(@bgcardColors1, @i);
    border-bottom-left-radius: 1.2rem;
    color: #fff;
    .text {
      padding: 66rpx 0 0 140rpx;
      :first-child {
        font-size: 40rpx;
        font-weight: bold;
      }
      img {
        position: relative;
        right: -410rpx;
        top: -100rpx;
        width: 150rpx;
        height: 150rpx;
        opacity: 0.3;
      }
    }
  }
}

.ripple {
  position: relative;
  overflow: hidden;
}
.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.3s, opacity 0.5s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}
</style>
